@extends('admin.base')
@section('title','Pictures')
@section('css')
<link href="{{asset('/css/fileinput.min.css')}}" rel="stylesheet" />
<style>
	.media{
		padding: 1em;
	}
	img{
		width: 200px;
		height: 200*0.618px;
	}
</style>
@endsection
@section('content')
<form action="{{ URL('/siteadmin/image')}}" enctype="multipart/form-data" method="post">
	<input type="hidden" name="_method" value="POST"/>
	<input type="hidden" name="_token" value="{{csrf_token()}}"/>
	<label class="control-label">Select File</label>
	<input id="imgUploader" type="file" name="uploadImage" class="file-loading" required="required" />
</form>
<div id="display">
	@foreach($images as $image)
	<div class="media">
		<div class="media-left">
			<a href="#">
				<img class="media-object" src="{{$image->url}}" alt="...">
			</a>
		</div>
		<div class="media-body">
			<h4 class="media-heading">
				{{ $image->title or "Title"}}
			</h4>
			<h5>
				{{ $image->description or "Content" }}
			</h5>
		</div>
		<div class="media-bottom">
			<form method="post" action="{{ URL('siteadmin/image/'.$image->id)}}" class="pull-right">
				<input type="hidden" name="_token" value="{{ csrf_token()}}"/>
				<input type="hidden" name="_method" value="DELETE"/>
				<a class="btn btn-success" href="{{ URL('siteadmin/image/'.$image->id.'/edit')}}">Edit</a>
				<button type="submit" class="btn btn-danger">Delete</button>
			</form>
		</div>
	</div>
	@endforeach
</div>
@endsection
@section('js')
<script src="{{asset('/js/fileinput.min.js')}}" type="text/javascript"></script>
<script>$(document).on('ready', function() {
	$("#imgUploader").fileinput({
		allowedFileTypes: ["image", "video"],
		showRemove: true,
		showUpload: true,
		uploadAsync: false,
	});
});</script>
@endsection
